import React, { useEffect, useState } from "react";
import { Button, Dropdown, Tag } from "antd";
import styles from "./index.less";

export default props => {
  const { originColumns = [], showColumns = [], onSetColumns } = props;
  const [visible, setVisible] = useState(false);
  const [showTags, setShowTags] = useState([]);
  const [hiddenTags, setHiddenTags] = useState([]);

  useEffect(() => {
    initTags();
  }, [showColumns]);

  function initTags() {
    setShowTags(
      originColumns.map(c => ({
        ...c,
        visible: !!showColumns.find(c1 => c.title === c1.title)
      }))
    );
    setHiddenTags(
      originColumns.map(c => ({
        ...c,
        visible: !showColumns.find(c1 => c.title === c1.title)
      }))
    );
  }
  const onOk = () => {
    onSetColumns(
      showTags.filter(t => t.visible),
      showTags.filter(t => !t.visible)
    );
    setVisible(false);
  };

  const onCancel = () => {
    initTags();
    setVisible(false);
  };

  const onReset = () => {
    setShowTags(originColumns.map(c => ({ ...c, visible: true })));
    setHiddenTags(originColumns.map(c => ({ ...c, visible: false })));
  };

  const onTagClose = (title, flag) => {
    setShowTags(
      showTags.map(t => {
        if (t.title === title) {
          return { ...t, visible: !flag };
        }
        return t;
      })
    );
    setHiddenTags(
      hiddenTags.map(t => {
        if (t.title === title) {
          return { ...t, visible: flag };
        }
        return t;
      })
    );
  };

  const dropContent = () => (
    <div className={styles.container}>
      <div className={styles.showColumn}>
        <div className={styles.header}>
          <span className={styles.title}>当前显示列属性</span>
        </div>
        <div className={styles.content}>
          {showTags.map((c, i) => (
            <Tag
              key={i}
              visible={c.visible}
              closable={showTags.filter(s => s.visible).length > 1}
              onClose={() => onTagClose(c.title, true)}
            >
              {c.title}
            </Tag>
          ))}
        </div>
      </div>
      <div className={styles.hiddenColumn}>
        <div className={styles.header}>
          <span className={styles.title}>当前未显示列属性</span>
        </div>
        <div className={styles.content}>
          {hiddenTags.map((c, i) => (
            <Tag
              key={i}
              visible={c.visible}
              closable={true}
              onClose={() => onTagClose(c.title, false)}
              // onClick={() => onTagClose(c.title, false)}
            >
              {c.title}
            </Tag>
          ))}
        </div>
      </div>
      <div className={styles.footer}>
        <div />
        <div className={styles.btns}>
          <Button type="primary" onClick={onOk}>
            <span>确 定</span>
          </Button>
          <Button onClick={onCancel}>
            <span>取 消</span>
          </Button>
          <Button onClick={onReset}>
            <span>恢复默认设置</span>
          </Button>
        </div>
      </div>
    </div>
  );

  // 下拉内容销毁方法
  const onVisibleChange = flag => {
    setVisible(flag);
    if (!flag) {
      initTags();
    }
  };

  return (
    <Dropdown
      overlay={dropContent()}
      trigger={["click"]}
      visible={visible}
      onVisibleChange={flag => onVisibleChange(flag)}
    >
      <Button type="text" icon="setting">
        显示列
      </Button>
    </Dropdown>
  );
};
